<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p {
			width: 350px;
			text-align: center;
			/*color: white;*/
			font: normal 20px/40px "Microsoft Yahei";
			border-radius: 10px;
			/*background-color: green;*/
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			width: 350px;
		}
		li{
			float: left;
			width: 50px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
	</style>

</head>
<body>
	<div class = "wrapper">
		<p>AUGUST</p>
		<ul>
			<li>SUN</li>
			<li>MON</li>
			<li>TUE</li>
			<li>WED</li>
			<li>THU</li>
			<li>FRI</li>
			<li>SAT</li>
		</ul>
		<ul class = "date">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ul>
	</div>

</body>
<script src="../jquery-3.3.1.min.js"></script>
<script>
	

	//对AUGUST变背景
	$(".wrapper>p:first-child").css("background-color","green");

	//对1和31变成30
	$(".date>li:first-child").css("font-size","30px");
	$(".date>li:last-child").css("font-size","30px");

	//对星期六和星期天变red
	$(".date>li:nth-child(7n+1)").css("color","red");
	$(".date>li:nth-child(7n+7)").css("color","red");

	//对星期加粗
	$(".wrapper>ul:first-of-type").css("font-weight","bold");


</script>
</html>